﻿@page "/maps/projection"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>In this example, you can see how to render a map with various projections. This map depicts the members of the UN security council.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render a map with various projections. Projection type is set using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ProjectionType'>ProjectionType</a></code>. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorMapping'>MapsShapeColorMapping</a></code> property to customize the color of the shapes. Tooltip is enabled in this example.</p>
    <p>More information about projection type can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/customization/#change-maps-projection'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <div class="control-section">
        <SfMaps ProjectionType="@ProjectionTypeValue">
            <MapsTitleSettings Text="Members of the UN Security Council">
                <MapsTitleTextStyle Size="16px" />
                <MapsSubtitleSettings Text="- In 2017" Alignment="Alignment.Far" />
            </MapsTitleSettings>
            <MapsLegendSettings Visible="true" />
            <MapsZoomSettings Enable="false" />
            <MapsLayers>
                <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' ShapeDataPath="Country" ShapePropertyPath='@ShapePropertyPath' DataSource="@ProjectionData" TValue="MapLayerDataSource">
                    <MapsLayerTooltipSettings Visible="true" ValuePath="Country" />
                    <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
                        <MapsShapeColorMappings>
                            <MapsShapeColorMapping Value="Permanent" Color="@ShapeColorOne" />
                            <MapsShapeColorMapping Value="Non-Permanent" Color="@ShapeColorOne" />
                        </MapsShapeColorMappings>
                    </MapsShapeSettings>
                </MapsLayer>
            </MapsLayers>
        </SfMaps>
        <div class="urllink">
            Source:
            <a href="https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council" target="_blank">en.wikipedia.org</a>
        </div>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" style="width:100%" title="Properties">
                <tbody>
                    <tr style="height: 50%">
                        <td style="width: 45%" class="property-text">
                            Projection Type
                        </td>
                        <td style="width: 55%">
                            <SfDropDownList Placeholder="Select projection type" DataSource="@ProjectionTypeList" @bind-Value="@ProjectionValue">
                                <DropDownListEvents TItem="ProjectionTypestring" TValue="string" ValueChange="ProjectionTypeChange" />
                                <DropDownListFieldSettings Text="Name" Value="Value" />
                            </SfDropDownList>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    public string ProjectionValue = "Mercator";
    public string[] ShapePropertyPath = { "name" };
    public string[] ShapeColorOne = { "#EDB46F" };
    public string[] ShapeColorTwo = { "#F1931B" };
    public ProjectionType ProjectionTypeValue = ProjectionType.Mercator;
    public List<MapLayerDataSource> ProjectionData = new List<MapLayerDataSource> {
        new MapLayerDataSource { Country="China", Membership="Permanent" },
        new MapLayerDataSource { Country="France", Membership="Permanent" },
        new MapLayerDataSource { Country="Russia", Membership="Permanent" },
        new MapLayerDataSource { Country="United Kingdom", Membership="Permanent" },
        new MapLayerDataSource { Country="United States",Membership="Permanent" },
        new MapLayerDataSource { Country="Bolivia", Membership="Non-Permanent" },
        new MapLayerDataSource { Country="Eq. Guinea", Membership="Non-Permanent" },
        new MapLayerDataSource { Country="Ethiopia", Membership="Non-Permanent" },
        new MapLayerDataSource { Country="Côte d Ivoire",Membership="Permanent" },
        new MapLayerDataSource { Country="Kazakhstan", Membership="Non-Permanent" },
        new MapLayerDataSource { Country="Kuwait", Membership="Non-Permanent" },
        new MapLayerDataSource { Country="Netherlands", Membership="Non-Permanent" },
        new MapLayerDataSource { Country="Peru", Membership="Non-Permanent" },
        new MapLayerDataSource { Country="Poland", Membership="Non-Permanent" },
        new MapLayerDataSource { Country="Sweden", Membership="Non-Permanent" }
    };
    public class ProjectionTypestring
    {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public class MapLayerDataSource
    {
        public string Country { get; set; }
        public string Membership { get; set; }
    };
    public List<ProjectionTypestring> ProjectionTypeList = new List<ProjectionTypestring> {
        new ProjectionTypestring { Value="Mercator", Name="Mercator" },
        new ProjectionTypestring { Value="Equirectangular", Name="Equirectangular" },
        new ProjectionTypestring { Value="Miller", Name="Miller" },
        new ProjectionTypestring { Value="Eckert3", Name="Eckert3" },
        new ProjectionTypestring { Value="Eckert5", Name="Eckert5" },
        new ProjectionTypestring { Value="Eckert6", Name="Eckert6" },
        new ProjectionTypestring { Value="Winkel3", Name="Winkel3" },
        new ProjectionTypestring { Value="AitOff", Name="AitOff" }
    };
    private void ProjectionTypeChange(ChangeEventArgs<string, ProjectionTypestring> args)
    {
        ProjectionValue = (args.Value).ToString();
        if (ProjectionValue == "Equirectangular")
        {
            ProjectionTypeValue = ProjectionType.Equirectangular;
        }
        else if (ProjectionValue == "Miller")
        {
            ProjectionTypeValue = ProjectionType.Miller;
        }
        else if (ProjectionValue == "Eckert3")
        {
            ProjectionTypeValue = ProjectionType.Eckert3;
        }
        else if (ProjectionValue == "Eckert5")
        {
            ProjectionTypeValue = ProjectionType.Eckert5;
        }
        else if (ProjectionValue == "Eckert6")
        {
            ProjectionTypeValue = ProjectionType.Eckert6;
        }
        else if (ProjectionValue == "Winkel3")
        {
            ProjectionTypeValue = ProjectionType.Winkel3;
        }
        else if (ProjectionValue == "AitOff")
        {
            ProjectionTypeValue = ProjectionType.AitOff;
        }
        else
        {
            ProjectionTypeValue = ProjectionType.Mercator;
        }
    }
}